import {Link} from 'umi';
import {CSSProperties, useEffect, useRef, useState} from 'react';
import {Button, Input, Space, Typography,Tooltip } from 'antd';
import { SizeType } from 'antd/lib/config-provider/SizeContext';
import { EditOutlined } from '@ant-design/icons';
import {useUpdateEffect} from "ahooks";
import {GetKnowledgeBaseInfoRequest} from "@/pages/Dashboard/Knowledge/service";

const { Title } = Typography;
export default ({
    value,
    style,
    size,
    onChange,
    knowledgeId,
    display,
}: {
    value: string;
    style?: CSSProperties;
    size?: SizeType;
    onChange?: (val: string) => void;
    knowledgeId?:string;
    display?:boolean;
}) => {
    const input: any = useRef<any>();
    const [inputVal, setInputVal] = useState<string>(value ?? '');
    const [editing, setEditing] = useState<boolean>(false);

    //获取知识详情
    const getKnowledgeBaseInfoRequest = async (id:string) => {
        const res:AircasKB.ResponseType<AircasKB.Knowledge.GetKnowledgeBaseInfoResponse> = await GetKnowledgeBaseInfoRequest({
            id:id
        });
        if(res.code == 200){
            // @ts-ignore
            setInputVal(res.data.title);
        }
    }
    useEffect(()=>{
        // @ts-ignore
        if(knowledgeId){
            getKnowledgeBaseInfoRequest(knowledgeId);
        }

    },[knowledgeId])
    useUpdateEffect(()=>{
        onChange?.(inputVal);
    },[inputVal])

    return (
        <Space style={{ ...style }}>
          {!editing && (
                <>
                    <Title level={2}>{inputVal}</Title>
                    { display &&
                        <Tooltip placement="top" title="编辑">
                            <Button
                                size="large"
                                type="link"
                                icon={<EditOutlined />}
                                onClick={() => setEditing(true)}
                            ></Button>
                        </Tooltip>

                    }
                    <Button type="link">
                        <Link to="/dashboard/knowledge/my">返回我的知识列表</Link>
                    </Button>
                </>
            )}
            {editing && display && (
                <Space>
                    <Input
                        ref={input}
                        defaultValue={inputVal}
                        size={size}
                        style={{ width: '50%', minWidth: 400 }}
                        onChange={(e)=>setInputVal(e.target.value)}
                    ></Input>
                    <Button
                        type="primary"
                        size={size}
                        onClick={() => {
                            const _val: string = inputVal;
                            if (_val?.length > 0) {
                                setInputVal(_val);
                                setEditing(false);
                                onChange?.(_val);
                            }
                        }}
                    >
                        确定
                    </Button>
                    <Button danger size={size} onClick={() => setEditing(false)}>
                        取消
                    </Button>
                </Space>
            )}
        </Space>
    );
};
